<template>
  <div style="padding: 10px;">
    <div class="headerBoxList">
      <svg t="1686534349030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2484" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
        <path
          d="M870.4 661.312H960v59.712h-89.6v89.6c0 41.216-18.496 59.712-59.712 59.712h-89.6V960h-59.712v-89.6H541.888V960h-59.776v-89.6H362.688V960h-59.776v-89.6h-89.6c-41.216 0-59.712-18.496-59.712-59.712v-89.6H64v-59.712h89.6V541.888H64v-59.776h89.6V362.688H64v-59.712h89.6v-89.6c0-41.28 18.496-59.776 59.712-59.776h89.6V64h59.712v89.6h119.488V64h59.712v89.6h119.488V64h59.712v89.6h89.6c41.216 0 59.712 18.496 59.712 59.712v89.6H960v59.712h-89.6v119.488H960v59.712h-89.6v119.488z m-59.712-448H213.312v597.312h597.312V213.312zM332.8 302.912h358.4c20.608 0 29.888 9.216 29.888 29.888v358.4c0 20.608-9.28 29.888-29.888 29.888H332.8c-20.608 0-29.888-9.28-29.888-29.888V332.8c0-20.608 9.28-29.888 29.888-29.888z"
          p-id="2485"></path>
      </svg>
      <span style="margin-left: 10px">CPU信息 </span>
    </div>
    <div class="content">
      <div style="border-bottom: 1px solid #ebebeb;display: flex;align-items: center;padding: 10px 0px;"
        v-for="(item, index) in list" :key="index">
        <img width="60" height="60" src="../../../../assets/CPU.png" alt="">
        <div style="margin-left: 15px;display: flex;align-items: center;justify-content: space-between;">
          <div style="width: 160px;">
            <div>制造商：{{ item.Features }}</div>
            <div>CPU 核心数：{{ item.architecture }}</div>
            <div>CPU 架构：{{ item.implementer }}</div>
          </div>
          <div style="width: 140px;">
            <div>CPU 变体：{{ item.part }}</div>
            <div>CPU 部件：{{ item.processor }}</div>
            <div>CPU 修订：{{ item.variant }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
        :page-size="limit" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPhoneInFoApi } from '@/api/phoneInfo/index'
export default {
  name: 'CPUPhone',
  props: ['sendData'],
  data() {
    return {
      list: [],
      total: 0,
      offset: 1,
      limit: 10
    }
  },
  watch: {
    '$store.state.account.basePhone': function () {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.offset = val;
      this.init();
    },
    init() {
      let api = '/' + this.sendData.href;
      let data = {
        proof_num: this.sendData.proof_num,
        offset: this.offset,
        limit: this.limit
      }
      getPhoneInFoApi(data, api).then(res => {
        this.list = res.data;
        this.total = res.data[0].cnt;
      }).catch(error => {

      })
    },
  }

}
</script>

<style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.content {
  height: 81vh;
  overflow-y: auto;
  /* padding-left:50px; */
  margin-top: 20px;
  overflow-x: hidden;
}

@media screen and (min-width: 2360px) {
  .content {
    height: 77vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 2561px) {
  .content {
    height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}</style>